<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>详情页</title>
<link rel="icon" href="${pageContext.request.contextPath}/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" />
<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.qrcode.min.js"></script>
<script type="${pageContext.request.contextPath}/text/javascript" src="js/jquery-ui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui.min.js" ></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui.structure.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui.theme.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
body {
	margin-top: 20px;
	margin: 0 auto;
}

</style>

<script type="text/javascript">

	$(document).ready(function() {
		$("#addIntoOrder").click(function() {
			var buyNum = $("#buyNum").val();
			var bookingTime = $("#bookingTime").val();
			var pid =${hometype.ht_id};
			$.ajax({
				url:"${pageContext.request.contextPath}/order",
				async:true,
				type:"POST",
				data:{
						"method":"addIntoOrder",
						"buyNum":buyNum,
						"bookingTime":bookingTime,
						"htid":ht_id
					},
				success:function(){
					alert("添加成功");
				},
			});
		});
	});
	
	/* $(document).ready(function() {
		$("#immediateBooking").click(function() {
			var buyNum = $("#buyNum").val();
			var bookingTime = $("#bookingTime").val();
			var pid =${hometype.ht_id};
			location.href="${pageContext.request.contextPath}/project?method=immediateBooking&bookingTime="+bookingTime+"";  
		});
	}); */
	
	 $(function() {
		$( "#startDtae" ).datepicker({
			 minDate: 0,
			 maxDate: "+1M +10D",
			 dateFormat:"yy-mm-dd",
			 });
		$( "#stopDtae" ).datepicker({
			 minDate: 0,
			 maxDate: "+1M +14D",
			 dateFormat:"yy-mm-dd",
			 });
	 });
	 $(function(){
			var i=0;
		    var hourList=new Array();
		    for(i;i<=23;i++){
		       hourList.push(i);
		    }
			$("#startHour").empty();
			$.each(hourList,function(i,n){
				var textNode = null;
				if(n<10){
					textNode = "0"+n+":00:00" ;
				}else{
					textNode = n+":00:00" ;
				}
				var html = "<option value="+textNode+">"+textNode+"</option>";
				$("#startHour").append(html);
			});
			$("#stopHour").empty();
			$.each(hourList,function(i,n){
				var textNode = null;
				if(n<10){
					textNode ="0"+n+":00:00";
				}else{
					textNode =n+":00:00";
				}
				var html = "<option value="+textNode+">"+textNode+"</option>";
				$("#stopHour").append(html);
				
			});
		});
	 
	 $( function() {
		    $( ".controlgroup" ).controlgroup()
		    $( ".controlgroup-vertical" ).controlgroup({
		      "direction": "vertical"
		    });
		  } );
	
	
	/* function addCart(){
		//获得购买的商品的数量
		var buyNum = $("#buyNum").val();
		location.href="${pageContext.request.contextPath}/project?method=addProductToCart&pid=${hometype.ht_id}&buyNum="+buyNum;
	} */


</script>

</head>

<body>
	<!-- 引入header.jsp -->
	<jsp:include page="header.jsp"></jsp:include>

	<div class="container"> 
		<div class="row">
		<div style=" width: 100%; height: 400px;">
			<div class="col-md-8">
				<img style="opacity: 1; width:100%; height: 380px;" title="房间图" class="medium"										 
					src="${pageContext.request.contextPath }/${hometype.ht_image}">
			</div>

			<div class="col-md-4">
				<div style="">
					<strong>${hometype.ht_name}</strong>&nbsp;&nbsp;&nbsp;&nbsp;
					<strong style="color: #ef0101;">价格: ${hometype.ht_price}元/晚</strong> 
				</div>
				<div style="padding:10px;border:1px solid #e7dbb1;width: 100%; background-color: #fffee6;">
					<form action="${pageContext.request.contextPath}/order?method=immediateBooking&htid=${hometype.ht_id}"
						          method="post" id="orderForm">
					<div style="border-bottom: 1px solid #faeac7; margin-top: 20px; padding-left: 10px;">
						预定房间数: 
						<div class="controlgroup">
					      <input id="onumber" class="ui-spinner-input" name="onumber" type="text" style="width: 20px;" value="1">
					    </div>
					    &nbsp; &nbsp; &nbsp;
					            人数：
						<div class="controlgroup">
					      <input id="unumber" class="ui-spinner-input" 
					      		name="unumber" type="text" style="width: 20px;" value="1">
					    </div>
						<!-- <input id="buyNum" name="buyNum" value="1" maxlength="4" size="10" type="text"> -->
					</div>
					<div style="border-bottom: 1px solid #faeac7; margin-top: 20px; padding-left: 10px;">
						预定日期: 
						<br>
						<label for="startDtae" >从</label>
						<input type="text" id="startDtae" name="startDtae" style="width:50%;">日
						<select id="startHour" name="startHour">
							<option value=""></option>
						</select>点
						<br>
						<label for="stopDtae">到</label>
						<input type="text" id="stopDtae" name="stopDtae" style="width:50%;">日
						<select id="stopHour" name="stopHour">
							<option value=""></option>
						</select>点
					</div>
					<div style="border-bottom: 1px solid #faeac7; margin-top: 20px; padding-left: 10px;">
						价格: 
						<input id="buyNum" name="total" value="100" maxlength="4" size="10" type="text">
					</div>

					<div style="margin: 20px 0 10px 0;; text-align: center;">
						<input type="submit" id="immediateBooking" value="立即预定"/>
					</div>
					</form>		
					
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<div style="width: 100%; ">
		<div class="col-md-12">
			<div style="background-color: #d3d3d3; width: 100%; padding: 10px 10px; margin: 10px 0 10px 0;">
				<strong>客房介绍</strong>
			</div>

			<%-- <div>
				<img src="${pageContext.request.contextPath }/${hometype.ht_image}">
			</div> --%>

			<!-- <div
				style="background-color: #d3d3d3; width: 100%; padding: 10px 10px; margin: 10px 0 10px 0;">
				<strong>商品描述</strong>
			</div> -->

			<div style="background-color: #d3d3d3; width: 100%;">
				<table class="table table-bordered">
					<tbody>
						<tr class="active">
							<th><strong>商品评论</strong></th>
						</tr>
						<tr class="warning">
							<th>暂无商品评论信息 <a>[发表商品评论]</a></th>
						</tr>
					</tbody>
				</table>
			</div>
			
		</div>
		</div>
	</div>
	</div>

	<!-- 引入footer.jsp -->
	<jsp:include page="footer.jsp"></jsp:include>

</body>

</html>